<template>
  <view class="h-12 bg-white border-bottom" @click="uploadLogo">
    <view class="px-4 h-full flex items-center justify-between">
      <view>品牌Logo</view>
      <view class="flex items-center">
        <image class="w-8 h-8 mr-2 rounded-full" :src="logoImg" @click.stop="previewImage([logoImg])" v-if="logoImg"></image>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </view>

  <view class="h-12 bg-white border-bottom" @click="openMerchantPop">
    <view class="px-4 h-full flex items-center justify-between">
      <view class="">商户品牌</view>
      <view class="flex-1 h-full flex items-center justify-end px-2">{{ merName }}</view>
      <image class="w-4 h-4" src="@/static/image/rt.png"></image>
    </view>
  </view>

  <!--@click="jumpEditPhone"-->
  <view class="h-12 mt-4 bg-white border-bottom">
    <view class="px-4 h-full flex items-center justify-between">
      <view>手机号码</view>
      <view class="flex-1 h-full flex items-center justify-end px-2 text-gray-400">{{ userInfoData.userInfo.phone }}</view>
      <!--<image class="w-4 h-4" src="@/static/image/rt.png"></image>-->
    </view>
  </view>

  <view class="h-12 bg-white border-bottom" @click="jumpSetPsd">
    <view class="px-4 h-full flex items-center justify-between">
      <view>密码设置</view>
      <image class="w-4 h-4" src="@/static/image/rt.png"></image>
    </view>
  </view>

  <!--<view class="h-12 mt-4 bg-white border-bottom">-->
  <!--  <view class="px-4 h-full flex items-center justify-between">-->
  <!--    <view>关于</view>-->
  <!--    <image class="w-4 h-4" src="@/static/image/rt.png"></image>-->
  <!--  </view>-->
  <!--</view>-->

  <view class="h-12 mt-4 bg-white flex justify-center items-center" @click="exit">安全退出</view>

  <!--@click="saveFanInfo"-->
  <!--<view class="flex items-center justify-center w-80 h-10 m-auto mt-6 bg-indigo-500 rounded-3xl text-white" >保 存</view>-->

  <!--商户品牌弹窗-->
  <uni-popup ref="merPopRef" type="center" :mask-click="true">
    <view class="rounded-xl bg-white p-4 box-border" style="width: 480rpx">
      <view class="text-center text-sm">商户品牌</view>
      <input class="ipt" placeholder="请输入商户品牌" placeholder-class="plcg" v-model="merchantPopName">

      <view class="mt-3 flex gap-4">
        <view @click="closeMerPop" class="text-xs h-6 flex-1 bg-gray-200 rounded-2xl flex items-center justify-center">取消</view>
        <view @click="confirmMerPop" class="text-xs text-white h-6 flex-1 bg-indigo-500 rounded-2xl flex items-center justify-center">确定</view>
      </view>
    </view>
  </uni-popup>

</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { setInfoApi, getInfoApi } from '@/api/fan/index'
    import { fileUpload } from '@/api/public/index'
    import { throttle } from '@/api/common'
    import { userStore } from '@/store/userStore'
    import { configStore } from '@/store/configStore'
    import { uiwu } from "@/api/interface/interface";

    const logoImg = ref<string>('')
    const merName = ref<string>('')
    const userInfoData = userStore()

    onMounted(() => {
      getInfoData()
    })

    const getInfoData = async () => {
      const res = await getInfoApi()
      const { merchant_logo, merchant_name } = res.data
      logoImg.value = merchant_logo
      merName.value = merchant_name
    }

    const configData = configStore()
    const uploadLogo = () => {
      uni.chooseImage({
        success: async (chooseImageRes) => {
          uni.showLoading({ title: '正在上传...' })
          const data = await fileUpload({
            name: 'file',
            filePath: chooseImageRes.tempFilePaths[0],
          })
          if(data.status != 200) {
            uiwu.toast(data.msg)
          }else {
            logoImg.value = data.data.url
            await saveInfo( { merchant_logo: logoImg.value } )
            await configData.initInfoData()
            uiwu.toast(data.msg)
          }
          // uni.hideLoading()
        }
      })
      // uni.navigateTo({ url: '/pages/fan/gamerSet' })
    }

    /** 预览图片 **/
    const previewImage = (imageArray) => {
      uni.previewImage({ urls: imageArray })
    }

    /** 保存信息 **/
    const saveInfo = (query) => {
      return new Promise( async(resovle, reject) => {
        const res = await setInfoApi(query)
        resovle(res)
      })
    }

    /** 商户品牌弹窗 **/
    const merPopRef = ref()
    const merchantPopName = ref<string>('')  // 弹窗里的商户品牌
    const openMerchantPop = () => {
      merchantPopName.value = merName.value
      merPopRef.value.open()
    }
    /** 取消商户品牌 **/
    const closeMerPop = () => {
      merPopRef.value.close()
    }

    /** 确认商户品牌 **/
    const confirmMerPop = throttle( async() => {
      saveInfo({ merchant_name: merchantPopName.value })
      await configData.initInfoData()
      uiwu.toast('修改成功')
      getInfoData()
      closeMerPop()
    }, 3000)

    const jumpEditPhone = () => {
      uni.navigateTo({ url: '/pages/set/editPhone' })
    }

    /** 密码设置 **/
    const jumpSetPsd = () => {
      uni.navigateTo({ url: '/pages/account/pwdforgot' })
    }

    /** 退出 **/
    const exit = () => {
      uiwu.toast('退出成功')
      uni.removeStorageSync('token')
      uni.removeStorageSync('user')
      setTimeout(() => {
        uni.reLaunch({ url: '/pages/account/login' })
        userInfoData.clearUserInfo({})
      }, 2000)
    }
</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #f5f5f5;
}
.ipt {
  height: 50rpx;
  margin-top: 20rpx;
  padding: 0 40rpx;
  border: 2rpx solid #f5f5f5;
  border-radius: 10rpx;
  font-size: 24rpx;
}
</style>
